Ext.onReady(function(){
    /******
     ****** host holds the name of my host computer.  I did this because of restrictions on making remote data requests.  If the 
     ****** host is localhost, things look great from my development machine.  If I try to view my page from another computer,
     ****** though, I get errors and nothing happens.  I set my host to tc-mark-lap (the name of my development computer).  If I 
     ****** view my page with localhost in the url, I get an error.  If I view it with tc-mark-lap, everything works.  This way,
     ****** I can view pages from my laptop or from a remote machine.  I'll have to remember to change this when I deploy to my
     ****** production server, though.  I might be able to set this in my controller or in a config table and use the javascript
     ****** helper to set it at runtime.  I'll have to check on that sometime.
     ******/

    var host = 'localhost';

    //This is the datastore.  My json data will be loaded remotely, then stored in the datastore.  
    //I used the HttpProxy because I'm accessing data on my local machine
    //In my json reader, I define the fields I should get from my json data (id, last_name, first_name, etc.
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url: 'http://'+host+'/depots/getAllDepots'}),  //note that I used host in the url
        reader: new Ext.data.JsonReader({
        root: 'depots',
		totalProperty: 'total',
		fields: [
			{name: 'dep_codigo'},
			{name: 'dep_nombre'},
			{name: 'dep_estado'},
			{name: 'dep_direccion1'},
			{name: 'dep_direccion2'},
			{name: 'dep_telefono1'},
			{name: 'dep_telefono2'},
			{name: 'dep_contacto'},
			{name: 'dep_mail'}
		]
		})
    });  

    //This is the column model.  This defines the columns in my datagrid.
    //It also maps each column with the appropriate json data from my database (dataIndex).
    var cm = new Ext.grid.ColumnModel([
        {header: "Codigo", dataIndex: 'dep_codigo', width: 100, hidden: false, sortable: true},
		{header: "Nombre", dataIndex: 'dep_nombre', width: 100},
		{header: "Estado", dataIndex: 'dep_estado', width: 60},
		{header: "Direccion 1", dataIndex: 'dep_direccion1', width: 100},
		{header: "Direccion 2", dataIndex: 'dep_direccion2', width: 100},
		{header: "Telefono 1", dataIndex: 'dep_telefono1', width: 100},
		{header: "Telefono 2", dataIndex: 'dep_telefono2', width: 100},
		{header: "Contacto", dataIndex: 'dep_contacto', width: 100},
		{header: "e-Mail", dataIndex: 'dep_mail', width: 100}
    ]);

    //Here's where we define our datagrid.  
    //We have to specify our dataStore and our columnModel.
    var grid = new Ext.grid.GridPanel({
		ds: ds,
		cm: cm,
		stripeRows: true,
		//autoHeight: true,
		height: 250,
		width: 675,
		title: 'Depositos'
    });

    ds.load(); //This loads data from the database into the datastore.

    /*onRowSelect: function(sm, rowIdx, r) {
        // getComponent will retrieve itemId's or id's. Note that itemId's 
        // are scoped locally to this instance of a component to avoid
        // conflicts with the ComponentMgr
        alert('Clicked');
    }*/

	grid.render('depots-grid');  //This renders our grid to the grid-paging div in our index.ctp view.
})

